<template>
  <div class="product-page">
    <section class="banner">
      <a-carousel autoplay :dots="false" :arrows="false" :pauseOnHover="false">
        <div class="banner-item1">
        </div>
        <div class="banner-item2">
        </div>
        <div class="banner-item3"></div>
      </a-carousel>
      <div class="banner-text">
        <h1>Shining Arctic Realm</h1>
        <p>追溯时光缝隙，源自哈尔蒂山之巅万年冰川之精灵，<br>凝聚岁月精华，精萃极寒之髓，闪耀极北之境。</p>
      </div>
    </section>

    <section class="black-crystal-intro">
      <img src="../assets/images/black-crystal/paopao.png" class="paopao" ref="paopao" alt="">
      <div class="container">
        <div class="crystal-content">
          <div class="crystal-image" v-fade-in="'left'">
            <img src="../assets/images/black-crystal/p1.png" alt="晶耀甄龙" />
          </div>
          
          <div class="crystal-text">
            <div class="crystal-title" v-fade-in="'up'">晶耀甄龙 尊奢焕新</div>
            <div class="crystal-subtitle" v-fade-in="'up'">BLACK CRYSTAL</div>
            
            <div class="crystal-features" v-fade-in="'right'">
                <div class="feature-item-title">核心科技：线粒体焕活突破</div>
                <div class="feature-item-desc">细胞能量支持，三重路径提升生命体活力  改善促进：改善</div>
                <div class="feature-item-desc">能量支持：有助于线粒体能量代谢、提升能量转化。</div>
                <div class="feature-item-desc">改善促进：改善睡眠，优化情绪，促进肌肤弹性，支持心血管健康，保护肝脏功能。</div>
                <div class="feature-item-desc">兼顾维稳：支持SIR T1基因表达，促进自由基清除，延缓衰老过程。</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="dark-section">
      <a-carousel :autoplay="p2AutoPlay" :dots="false" :arrows="false" :pauseOnHover="false">
        <div class="p2-item1">
        </div>
        <div class="p2-item2">
        </div>
        <div class="p2-item3"></div>
      </a-carousel>
      <div class="p2-text" v-if="!p2AutoPlay" v-fade-in="'left'">
        <div class="p2-text-content">
          <p class="p2-text-line">—</p>
          <p class="p2-text-title">黑金系列</p>
          <p class="p2-text-subtitle">BLACK CRYSTAL</p>
          <p class="p2-text-desc">
            追溯时光缝隙,源自哈尔蒂山之巅万年冰川之精灵,<br> 凝聚岁月精华,精萃极寒之髓,闪耀极北之境。
          </p>
          <img src="../assets/images/black-crystal/arrow.png" class="p2-text-arrow" @click="p2AutoPlay = !p2AutoPlay" />
        </div>
      </div>
    </section>

    <section class="ingredients">
      <div class="ingredients-content">
        <div class="ingredient-section">
        <div class="ingredient-left" v-fade-in="'left'">
          <a-carousel :autoplay="true" :dots="false" :arrows="true" >
            <template #prevArrow>
              <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
                <LeftOutlined style="font-size: 22px;" />
              </div>
            </template>
            <template #nextArrow>
              <div class="custom-slick-arrow" style="right: 10px">
                <RightOutlined style="font-size: 22px;" />
              </div>
            </template>
            <img class="p3-bg1-item1" src="../assets/images/black-crystal/p3-b1.png" alt="">
            <img class="p3-bg1-item2" src="../assets/images/black-crystal/p3-b1.png" alt="">
            <img class="p3-bg1-item3" src="../assets/images/black-crystal/p3-b1.png" alt="">
          </a-carousel>
        </div>
        <div class="ingredient-right" >
          <h3 class="ingredient-title" v-fade-in="'up'">万年冰川之精灵</h3>
          <div class="ingredient-desc" v-fade-in="'bottom'">
            <p>珍稀野生冰蓝莓，化石等级珍品，生长在北极山地，保护了百万年。</p>
            <p>提炼零下七十度纯净精华，保留自然黄酮，延缓衰老代谢。</p>
          </div>
        </div>
      </div>

      <div class="ingredient-section reversed">
        <div class="ingredient-left" v-fade-in="'right'">
          
          <a-carousel :autoplay="true" :dots="false" :arrows="true" >
            <template #prevArrow>
              <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
                <LeftOutlined style="font-size: 22px;" />
              </div>
            </template>
            <template #nextArrow>
              <div class="custom-slick-arrow" style="right: 10px">
                <RightOutlined style="font-size: 22px;" />
              </div>
            </template>
            <img class="p3-bg1-item1" src="../assets/images/black-crystal/p3-b2.png" alt="">
            <img class="p3-bg1-item2" src="../assets/images/black-crystal/p3-b2.png" alt="">
            <img class="p3-bg1-item3" src="../assets/images/black-crystal/p3-b2.png" alt="">
          </a-carousel>
        </div>
        <div class="ingredient-right" >
          
          <h3 class="ingredient-title" v-fade-in="'up'">绿色和谐自然交响</h3>
          <div class="ingredient-desc" v-fade-in="'bottom'">
            <p>古老珍贵沉香精华，古代称为异香，远在千年前，已受人无限追捧。</p>
            <p>野生珍稀，生长时间百余年，深层提取精华，经百道工艺萃取。</p>
          </div>
        </div>
      </div>

      <div class="ingredient-section">
        <div class="ingredient-left" v-fade-in="'left'">
          
          <a-carousel :autoplay="true" :dots="false" :arrows="true" >
            <template #prevArrow>
              <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
                <LeftOutlined style="font-size: 22px;" />
              </div>
            </template>
            <template #nextArrow>
              <div class="custom-slick-arrow" style="right: 10px">
                <RightOutlined style="font-size: 22px;" />
              </div>
            </template>
            <img class="p3-bg1-item1" src="../assets/images/black-crystal/p3-b3.png" alt="">
            <img class="p3-bg1-item2" src="../assets/images/black-crystal/p3-b3.png" alt="">
            <img class="p3-bg1-item3" src="../assets/images/black-crystal/p3-b3.png" alt="">
          </a-carousel>
        </div>
        <div class="ingredient-right">
          <h3 class="ingredient-title"  v-fade-in="'up'">生命之花绽放</h3>
          <div class="ingredient-desc" v-fade-in="'down'">
            <p>珍稀野生冰蓝莓，化石等级珍品，生长在北极山地，保护了百万年。</p>
            <p>提炼零下七十度纯净精华，保留自然黄酮，延缓衰老代谢。</p>
          </div>
        </div>
      </div>
      </div>
    </section>

    <section class="research-center">
      <div class="research-content">
        <!-- 左侧固定文字区 -->
        <div class="research-text" v-fade-in="'left'">
          <h2 class="research-title">研究中心</h2>
          <h3 class="research-subtitle">RESEARCH<br>CENTRE</h3>
          <p class="research-desc">
            追溯时光缝隙,源自哈尔蒂山之巅万年冰川之精灵,凝聚岁月精华,精萃极寒之髓,闪耀极北之境。
          </p>
        </div>
        
        <!-- 右侧图片区 -->
        <div class="research-images">
          <!-- 第一张图片(默认展开) -->
          <div class="research-image" :class="{'research-image-active': activeResearchImage === 1}" @click="activeResearchImage = 1">
            <img src="../assets/images/black-crystal/p4-b1.png" alt="研究中心" />
          </div>
          
          <!-- 第二张图片(默认收起) -->
          <div class="research-image" :class="{'research-image-active': activeResearchImage === 2}" @click="activeResearchImage = 2">
            <img src="../assets/images/black-crystal/p1.png" alt="研究实验室" />
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { ArrowRightOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
export default {
  name: 'AboutView',
  components: {
    ArrowRightOutlined,
    LeftOutlined,
    RightOutlined
  },
  data() {
    return {
      p2AutoPlay: false,
      paopaoInterval: null,
      activeResearchImage: 1
    };
  },
  mounted() {
    setTimeout(() => {
      window.dispatchEvent(new Event('scroll'));
    }, 500);
    
    this.startPaopaoMovement();
  },
  beforeUnmount() {
    if (this.paopaoInterval) {
      clearInterval(this.paopaoInterval);
    }
  },
  methods: {
    startPaopaoMovement() {
      const paopao = this.$refs.paopao;
      if (!paopao) return;
      
      this.movePaopao();
      
      this.paopaoInterval = setInterval(() => {
        this.movePaopao();
      }, 9000);
    },
    movePaopao() {
      const paopao = this.$refs.paopao;
      if (!paopao) return;
      
      const viewportWidth = window.innerWidth;
      const containerHeight = document.querySelector('.black-crystal-intro').clientHeight;
      
      const maxX = viewportWidth / 2 * 2.5;
      const maxY = containerHeight * 1.8;
      
      const angle = Math.random() * Math.PI * 2;
      const distanceX = Math.random() * maxX;
      const distanceY = Math.random() * maxY;
      
      const randomX = Math.cos(angle) * distanceX;
      const randomY = Math.sin(angle) * distanceY;
      
      paopao.style.transform = `translate(${randomX}px, ${randomY}px) rotate(${Math.random() * 20 - 10}deg)`;
    }
  }
}
</script> 

<style scoped lang="scss">
.banner {
  width: 100%;
  height: calc(100vh - 114px);
  position: relative;
  .banner-item1, .banner-item2, .banner-item3 {
    width: 100%;
    height: calc(100vh - 114px);
    background-image: url('../assets/images/black-crystal/banner1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  .banner-text {
    position: absolute;
    bottom: 5rem;
    left: 5rem;
    z-index: 2;
    color: #000;
    h1 {
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 0;
    }
    p {
      font-size: 1rem;
      font-weight: 400;
      margin-bottom: 0;
    }
  }
}

:root {
  --primary-color: #4a2c4f;
  --secondary-color: #9d6bad;
  --dark-color: #1a1a1a;
  --light-color: #f5f5f5;
  --text-color: #333;
  --transition: all 0.3s ease;
}

.product-page {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: var(--text-color);
  line-height: 1.6;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
  background-color: transparent;
}

/* 英雄区域 */
.hero-section {
  height: 100vh;
  background-image: url('../assets/hero-background.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  position: relative;
  color: #fff;
  text-align: center;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 300;
  margin-bottom: 1rem;
  letter-spacing: 3px;
}

.hero-subtitle {
  font-size: 1rem;
  max-width: 600px;
  margin: 0 auto;
  opacity: 0.9;
  line-height: 1.8;
}

.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 50px;
  background-image: url('../assets/scroll-arrow.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

/* 产品介绍 */
.product-intro {
  padding: 6rem 0;
  background-color: var(--light-color);
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* 轮播图样式 */
.carousel-item {
  height: 400px;
  overflow: hidden;
  border-radius: 5px;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-name {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.product-subtitle {
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 2rem;
  color: var(--secondary-color);
  letter-spacing: 2px;
}

.product-description p {
  margin-bottom: 1rem;
  color: #555;
}

/* 按钮样式 */
.action-buttons {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
}

/* 产品特点 */
.dark-section {
  width: 100%;
  height: calc(100vh - 114px);
  position: relative;
  .p2-item1, .p2-item2, .p2-item3 {
    width: 100%;
    height: calc(100vh - 114px);
    background-image: url('../assets/images/black-crystal/p2.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  .p2-text {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    top: 0;
    width: 26%;
    background-color: #3F2B56;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: left;
    .p2-text-content {
      width: fit-content;
    }
    .p2-text-title {
      font-size: 2rem;
      width: fit-content;
      font-weight: 400;
      margin-bottom: 0;
      line-height: 2rem;
    }
    .p2-text-arrow {
      font-size: 3rem;
      width: 30px;
      width: fit-content;
      margin-top: 2rem;
      cursor: pointer;
    }
    .p2-text-subtitle {
      font-size: 2rem;
      font-weight: 600;
      width: fit-content;
      margin-bottom: 0;
      line-height: 2rem;
      margin-bottom: 1rem;
    }

    .p2-text-line {
      font-size: 1rem;
      width: fit-content;
      padding-left: .4rem;
      margin-bottom: 1rem;
    }

    .p2-text-desc {
      font-size: .8rem;
      width: fit-content;
      margin-bottom: 0;
    }
    
  }
}

.feature-header {
  text-align: left;
  margin-bottom: 3rem;
  max-width: 400px;
}

.feature-title {
  font-size: 1.8rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.feature-subtitle {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  letter-spacing: 2px;
  color: var(--secondary-color);
}

.feature-desc {
  opacity: 0.8;
  line-height: 1.8;
}

.feature-image {
  max-width: 800px;
  margin: 0 auto;
}

.feature-image img {
  width: 100%;
}

/* 成分介绍 */
.ingredients {
  padding: 0;
  width: 100%;  
  padding-top: 100px;
    background-image: url('../assets/images/black-crystal/p3-bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  .ingredients-content {
    width: 1200px;
    margin: 0 auto;
  }
}

.ingredient-section {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;

}
:deep(.custom-slick-arrow) {
  color: #fff;
  z-index: 4;
  font-size: 22px;

  &:hover {
    color: #fff;
  }

  &::before {
    display: none;
  }
}
.p3-bg1-item1, .p3-bg1-item2, .p3-bg1-item3 {
      width: 100%;
    }

.ingredient-section.reversed {
  flex-direction: row-reverse;
}

.ingredient-left,
.ingredient-right {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.ingredient-title {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 2rem;
  padding: 0 4rem;
}

.ingredient-desc {
  padding: 0 4rem;
  font-size: .8rem;
}

.ingredient-desc p {
  color: #808080;
  margin-bottom: 0;
}

/* 研究中心 */
.research-center {
  background-image: url('../assets/images/black-crystal/p4bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0;
  width: 100%;
  height: 80vh;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 100px;
}

.research-content {
  width: 80vw;
  height: 60vh;
  display: flex;
  float: right;
}

.research-text {
  width: 350px;
  height: 100%;
  background-color: rgba(80, 80, 80, 0.9);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 40px;
}

.research-title {
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 1rem;
  color: #ffffff;
}

.research-subtitle {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 2rem;
  letter-spacing: 2px;
  line-height: 2.2rem;
}

.research-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.research-images {
  flex: 1;
  position: relative;
  display: flex;
  overflow: hidden;
}

.research-image {
  height: 100%;
  flex: 0.15;
  transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.research-image-active {
  flex: 0.85;
}

.research-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.research-image:not(.research-image-active) img {
  transform: scale(1.3);
  object-position: left center;
  filter: brightness(0.8);
}

.research-image:not(.research-image-active)::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.3), rgba(0,0,0,0.1));
  pointer-events: none;
}

.research-image:not(.research-image-active):hover {
  flex: 0.25;
}

.research-image:not(.research-image-active):hover img {
  filter: brightness(0.9);
}

/* 切换指示器 */
.research-indicator {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 8px;
  z-index: 5;
}

.indicator-dot {
  width: 30px;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator-dot.active {
  background-color: #ffffff;
  width: 40px;
}

/* 页脚 */
.site-footer {
  background-color: var(--dark-color);
  color: #fff;
  padding: 3rem 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.footer-column h4 {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: var(--secondary-color);
}

.footer-column p {
  font-size: 0.9rem;
  opacity: 0.8;
}

.qr-code img {
  width: 100px;
  height: 100px;
}

/* 联系表单 */
.contact-form {
  margin-top: 1rem;
}

@media (max-width: 992px) {
  .product-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .ingredients-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 576px) {
  .ingredients-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
  }
  
  .hero-section {
    height: 80vh;
  }
}

/* 晶耀甄龙产品介绍部分 */
.black-crystal-intro {
  padding: 10rem 0;
  background-color: #f5f8fa;
  background-image: url('../assets/images/black-crystal/p1bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  position: relative;

  .paopao {
    position: absolute;
    top: 0%;
    right: 10%;
    z-index: 1;
    transition: transform 6s cubic-bezier(0.25, 0.1, 0.25, 1); // 增加过渡时间到6秒
    will-change: transform;
    filter: blur(0.3px); /* 添加轻微模糊效果增强飘动感 */
    animation: floatDiagonal 25s ease-in-out infinite alternate; /* 增加动画时间到25秒 */
  }
}

@keyframes floatDiagonal {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-40%, -50%) rotate(12deg);
  }
  50% {
    transform: translate(50%, -70%) rotate(15deg);
  }
  75% {
    transform: translate(-60%, 40%) rotate(-12deg);
  }
  100% {
    transform: translate(70%, 30%) rotate(-15deg);
  }
}

.crystal-content {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.crystal-text {
  flex: 1;
}

.crystal-image {
  flex: 1;
  display: flex;
  justify-content: center;
}

.crystal-image img {
  max-width: 100%;
  width: 650px;
  height: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.crystal-title {
  font-weight: 400;
  color: #000;
  font-size: 2rem;
  width: 100%;
  line-height: 2rem;
}

.crystal-subtitle {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: #d7d7d7;
  line-height: 2rem;
}

.crystal-features {
  margin-top: 2rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.feature-item-title {
  font-size: 14px;
  font-weight: 600;
  color: #000;
  letter-spacing: 2px;
}

.feature-item-desc {
  font-size: 14px;
  font-weight: 400;
  color: #808080;
  letter-spacing: 2px;
}

.feature-item {
  margin-bottom: 1rem;
  padding-left: 1rem;
}

.feature-item h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.feature-item p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
}

@media (max-width: 992px) {
  .crystal-content {
    flex-direction: column;
    gap: 2rem;
  }
  
  .crystal-image {
    order: 0;
  }
}
</style> 